<template>
  <view :style="colorStyle">
      <view class="tab-box-public">
        <view @click="changeTab(item)" :class="{'tab-active':item.category_id==tabId}" class="tab-item fs-regular" v-for="(item,index) in tabList" :key="index">
          <image v-if="item.category_image" class="tab-img" :src="item.category_image"></image>
          <view>{{ item.category_name }}</view>
        </view>
      </view>
      <view class="detail-box">
        <uni-collapse>
          <uni-collapse-item v-for="(item,index) in nowDetail" :key="index" :title="item.title" :show-animation="true">
            <view class="detail-con fs-24">
              <mp-html :preview-img="false" :selectable="false" :content="item.content" />
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>

</template>

<script>
import alipayChat from "@/components/alipayChat/index.vue";
import { mapGetters } from "vuex";
import colors from "@/mixins/color";
import {getHelpInfo} from "@/api/kefu";
import pageFooter from "@/components/pageFooter/index.vue";
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
  mixins: [colors],
  components: {
    pageFooter,
    alipayChat
  },
  data() {
    return {
      name: '',
      info: null,
      sysHeight: sysHeight,
      tabList:[],
      tabId:'',
      detailList:[],
      nowDetail:[],
      service:{},
      customer_type:'',

      isFooter:false,
      showBar:false,
      pdHeight:0
    };
  },
  mounted() {
    this.getHelpInfo()
  },
  // computed: mapGetters(['userInfo']),
  computed:{
    ...mapGetters(['userInfo']),
    service_num(){
      if(this.userInfo.length>0){
        let userInfo = JSON.parse(this.userInfo)
        return userInfo?.service_num
      }
    }
  },
  methods: {
    getHelpInfo(){
      getHelpInfo({
        flag:'all'
      }).then(res=>{
        this.tabList=res.data.category
        console.log('tabList',this.tabList)
        this.detailList=res.data.detail
        this.changeTab(res.data.category[0])
      })
    },
    changeTab(tab){
      this.tabId=tab.category_id
      let now_detail=this.detailList.find(item=>item.category_id==this.tabId)
      this.nowDetail=now_detail.detail?now_detail.detail:[]
    },

  }
}
</script>

<style lang="scss" scoped>
.content{
}
.head{
  position: relative;
  .title{
    position: absolute;
    top: 220rpx;
    left: 30rpx;
    z-index: 10;
  }
}
.cont{
  padding: 30rpx;
  margin-top: -150rpx;
  box-sizing: border-box;
}
/deep/.uni-collapse-item__title{
  //border: none !important;
}
/deep/.uni-collapse-item__title-box{
  height: 100rpx;
}
/deep/.uni-collapse-item__title-text{
  font-size: 26rpx;
  line-height: 1.5;
}
.chat-box{
  display: flex;
  .item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50%;
    padding:30rpx 20rpx;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    position: relative;
    .l{
      width: 80rpx;
      height: 80rpx;
    }
    .c{
      padding: 0 20rpx;
    }
    /deep/contact-button{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 10;
    }
  }
}
.tab-box-public{
  border-radius: 20rpx 20rpx 0 0;
  align-items: flex-end !important;
  padding-bottom: 34rpx;
  border-bottom: 1px solid #ebeef5;
  padding-top: 36rpx;
  .tab-item{
    font-weight: bold;
  }
  .tab-img{
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }
}
.detail-box{
  border-radius: 20rpx;
  padding-bottom: 300rpx;
  background: #fff;
  .detail-con{
    padding: 10rpx 30rpx 30rpx;
  }
}
</style>
